<template>
	<div v-if="visible">
		<el-dialog element-loading-spinner="el-icon-loading" :title="$t('text.selectTitle')" :visible.sync="visible"
			width="40%" :before-close="closeDialog" custom-class="add_dialog">
			<!-- default-expand-all 是否默认展开所有行 -->
			<el-table v-loading="loading" ref="qtableLink" :data="tableData" :show-header="false" row-key="id" @select="select"
				@row-click="tableCurrentChange" @selection-change="tableSelectionChange" border
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
				<el-table-column :selectable="selectable" type="selection" :reserve-selection="true" width="55" />
				<el-table-column prop="name" label="" />
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
				<el-button type="primary" @click="getData">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { getUrlSelectList } from '@/api/app-set'
export default {
	props: [],
	data() {
		return {
			visible: false,
			loading: false,
			tableData: [],
			tableSelectedList: []
		}
	},
	watch: {},
	mounted() { },
	beforeDestroy() { },
	methods: {
		getOpen(id) {
			console.log(id)
			this.visible = true
			if (this.tableData.length === 0) {
				this.$nextTick(() => {
					this.loading = true
					getUrlSelectList().then(res => {
						if (res.code === 200) {
							this.tableData = res.data
							this.getChecked(id)
							this.loading = false
						} else {
							this.loading = false
						}
					})
				})
			} else {
				this.getChecked(id)
			}
		},
		getChecked(id) {
			setTimeout(() => {
				if (id) {
					var str = id
					for (var i = 0; i < this.tableData.length; i++) {
						var item = this.tableData[i]
						if (str === item.id) {
							this.tableSelectedList = []
							this.$refs.qtableLink.toggleRowSelection(item, true)
							return false
						}
						if (item.children) {
							this.getCheckData(str, item.children)
						}
					}
				}
			}, 100)
		},
		getCheckData(id, data) {
			var _this = this
			for (var i = 0; i < data.length; i++) {
				var item = data[i]
				if (id === item.id) {
					this.tableSelectedList = []
					this.$refs.qtableLink.toggleRowSelection(item, true)
					return false
				}
				if (item.children) {
					this.getCheckData(id, item.children)
				}
			}
		},
		tableSelectionChange(selection) {
			this.tableSelectedList = selection
		},
		async select(selection, row) {
			// 清除 所有勾选项 await 等待清除完之后在执行后边代码
			await this.$refs.qtableLink.clearSelection()
			if (selection.length === 0) return
			this.$refs.qtableLink.toggleRowSelection(row, true)
		},
		// 表格某一行的单击事件
		tableCurrentChange(row) {
			if (row.type === 0) {
				var list = this.tableSelectedList
				this.$refs.qtableLink.clearSelection()
				if (list.length !== 0) {
					list.forEach(item => {
						if (item === row) {
							this.$refs['qtableLink'].toggleRowSelection(row, false)
						} else {
							this.$refs['qtableLink'].toggleRowSelection(row)
						}
					})
				} else {
					this.$refs['qtableLink'].toggleRowSelection(row)
				}
			}
		},
		selectable: function (row, index) {
			if (row.type === 0) {
				return true
			}
		},
		getData() {
			var list = this.tableSelectedList
			if (list.length === 0) {
				this.$message({
					message: this.$t('text.pSelLeastList'),
					type: 'warning'
				})
				return false
			}
			this.visible = false
			this.tableSelectedList = []
			this.$emit('change', list[0].id, list[0].name)
		},
		closeDialog() {
			this.visible = false
			this.tableSelectedList = []
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .add_dialog {
	height: calc(100% - 30vh) !important;
	position: relative;

	.el-dialog__header {
		border-bottom: 1px solid #e4e4e4;
		text-align: left;
	}

	.el-dialog__body {
		height: calc(100% - 125px);
		overflow: auto;
	}

	.el-dialog__footer {
		border-top: 1px solid #e4e4e4;
		text-align: right;
	}

	.el-button:hover,
	.el-button:focus {
		color: #000;
	}
}
</style>

